<template>
	<!-- 标签页 -->
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" >
		<el-tab-pane label="全部" name="first">
			<myproductTabsAll v-if="activeName === 'first'"/>
		</el-tab-pane>
		<el-tab-pane label="出售中" name="second" >
			<myproductTabsOnsale v-if="activeName=== 'second'"/>
		</el-tab-pane>
		<el-tab-pane label="仓库中" name="third">
			<myproductTabsStock v-if="activeName=== 'third'"/>
		</el-tab-pane>
		<el-tab-pane label="草稿" name="fourth">
			<myproductTabsDraft v-if="activeName=== 'fourth'"/>
		</el-tab-pane>
		<el-tab-pane label="回收站" name="fifth">
			<myproductTabsRecycle v-if="activeName=== 'fifth' "/>
		</el-tab-pane>
	</el-tabs>
	
</template>

<script setup>
import myproductTabsAll from './myproduct-tabs-all.vue';
import myproductTabsOnsale from './myproduct-tabs-onsale.vue';
import myproductTabsStock from './myproduct-tabs-stock.vue';
import myproductTabsDraft from './myproduct-tabs-draft.vue';
import myproductTabsRecycle from './myproduct-tabs-recycle.vue';
import { ref } from 'vue'
const activeName = ref('first')
//标签页选择
const handleClick = (tabName, event) => {
}
</script>

<style scoped lang="scss">
::v-deep .el-tabs__item {
  font-size: 18px;
  font-weight: 500;
}

//标签页
.demo-tabs{
	letter-spacing: 1px;
}
</style>